<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap-5.2.3.min.css">
    <link rel="stylesheet"
          href="../css/jrdiaeyvuy.css">
    <link rel="stylesheet" href="../css/bootstrap-icons.min.css">
    <!-- 引入Bootstrap-datepicker CSS -->
    <link rel="stylesheet"
          href="../css/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" href="../css/showSign.css">
    <title>首页-内容管理</title>
</head>

<body>
<div class="wrap">
    <!-- 侧边栏 -->
    <div class="aside">
        <h2>签到系统</h2>
        <ul class="nav">
            <li>
                <a href="sign.html">
                    <span class="iconfont icon-fabu"></span>
                    <span>去签到</span>
                </a>
            </li>
            <li>
                <a href="./showSign.html" class="active">
                    <span class="iconfont icon-16"></span>
                    <span>查看签到信息</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 右侧区域 -->
    <div class="main">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-item">
                <span class="nick-name">昵称</span>
                <span class="quit">退出</span>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <!-- 筛选 -->
            <div class="card">
                <div class="title">
                    <p class="total-count">在本系统中您一共签到：<span>0</span>次</p>
                    <button type="button" class="btn btn-info sel-btn">获取签到记录</button>
                </div>
                <div class="body">
                    <div class="form-group">
                        <label for="beginDate">起始时间:</label>
                        <input type="text" class="form-control begin" id="beginDate">
                    </div>
                    <div class="form-group">
                        <label for="endDate">结束时间:</label>
                        <input type="text" class="form-control end" id="endDate">
                    </div>
                </div>
            </div>
            <div class="card">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>用户名</th>
                        <th>用户昵称</th>
                        <th>签到时间</th>
                    </tr>
                    </thead>
                    <tbody class="align-middle art-list">
                    <tr>
                        <td>123456</td>
                        <td>
                            <span>张三</span>
                        </td>
                        <td>
                            <span>2023-04-27 10:59:34</span>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="../js/axios.min.js"></script>
<!-- 引入jQuery库 -->
<script src="../js/jquery-3.5.1.slim.min.js"></script>
<!-- 引入Popper.js（Bootstrap 4的依赖） -->
<script src="../js/popper.min.js"></script>
<!-- 引入Bootstrap JavaScript -->
<script src="../js/bootstrap4.5.2.min.js"></script>
<!-- 引入Bootstrap-datepicker JavaScript -->
<script src="../js/bootstrap-datepicker.min.js"></script>
<!-- 引入Bootstrap-datepicker的中文语言包 -->
<script src="../js/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- serialize 表单数据收集 -->
<script src="../js/form-serialize.js"></script>
<!--todo-->
<!-- request 和 auth 这两个js 涉及了token 校验 当完成了token对应接口注意后解开注释 -->
<script src="../js/request.js"></script>
<script src="../js/auth.js"></script>
<script src="../js/alert.js"></script>
<script src="../js/showSign.js"></script>
<script>
    $(document).ready(function () {
        // 初始化起始时间选择框并设置为中文
        $('#beginDate').datepicker({
            format: 'yyyy-mm-dd', // 设置日期格式
            autoclose: true, // 选择日期后自动关闭
            todayHighlight: true, // 高亮显示今天
            language: 'zh-CN' // 设置语言为中文
        }).on('changeDate', function (e) {
            // 当开始时间发生变化时触发的函数
            var beginDate = $('#beginDate').val();

            var date = new Date();
            // 起始时间不能大于当前时间
            if (date.getDate() < new Date(beginDate).getDate()) {
                alert('起始时间不能大于当前时间')
                $(this).datepicker('setDate', ""); // 设置处理过的日期
                beginDate = ""
            }
            // 处理页面数据和发送给后台的数据
            queryObj.begin_time = beginDate
            console.log('开始时间已更改:', queryObj.begin_time);
        });

        // 初始化结束时间选择框并设置为中文
        $('#endDate').datepicker({
            format: 'yyyy-mm-dd ', // 设置日期格式
            autoclose: true, // 选择日期后自动关闭
            todayHighlight: true, // 高亮显示今天
            language: 'zh-CN' // 设置语言为中文
        }).on('changeDate', function (e) {
            // 当结束时间发生变化时触发的函数
            var beginDate = $('#beginDate').val();
            var endDate = $('#endDate').val();

            // 结束时间不能小于开始时间
            if (new Date(endDate).getDate() < new Date(beginDate).getDate()) {
                alert('结束时间不能小于开始时间')
                $(this).datepicker('setDate', ""); // 设置处理过的日期
                endDate = ""
            }
            // 处理页面数据和发送给后台的数据
            queryObj.end_time = endDate
            console.log('结束时间已更改:', queryObj.end_time);
        });
    });


    // 1.1 准备查询参数对象
    const queryObj = {
        begin_time: 1, // 查询起始时间
        end_time: 5   // 查询结束时间
    }
    /**
     * 目标1：获取文章列表并展示
     *  1.1 准备查询参数对象
     *  1.2 获取文章列表数据
     *  1.3 展示到指定的标签结构中
     */
    let totalCount = 0 // 时间内签到总数量

    // todo 获取并设置浏览记录列表
    async function setSignDataList() {
        // 1.2 todo 获取浏览列表数据
        // const res = await axios({
        //     url: '/api/sign/signList',
        //     params: queryObj
        // })
        // 1.3 展示到指定的标签结构中
        // todo 伪代码 具体结构以后台数据为准
        // const htmlStr = res.data.results.map(item => `<tr>
        //                 <td><span>${item.username}</span></td>
        //                 <td>
        //                     <span>${item.nickName}</span>
        //                 </td>
        //                 <td>
        //                     <span>${item.signTime}</span>
        //                 </td>
        //
        //             </tr>`).join('')
        // document.querySelector('.art-list').innerHTML = htmlStr

        // 3.1 保存并设置文章总条数
        // totalCount = res.data.totalCount
        // document.querySelector('.total-count').innerHTML = `在这段时间内您共签到${totalCount}次`
        alert('发送请求获取签到信息')
    }

    setSignDataList()

    // 点击获取
    document.querySelector('.sel-btn').addEventListener('click', async () => {
        // 2.4 获取匹配数据，覆盖到页面展示
        await setSignDataList()
    })


</script>
</body>

</html>